@import url('../../base/base.min.css');
@function rem($size) {
    @return ($size/108)*1rem;
}

;
body {
    background: url('../img/gd-bg.jpg');
}

header {
    width: 100%;
    img{
        width: 100%;
    }
}

nav {
    position: relative;
    width: 100%;
    background-color: #490000;
    left: 0;
    top: 0;
    z-index: 1;
    .nav-more{
        position: absolute;
        bottom: rem(-30);
        left: 50%;
        transform: translateX(-50%);
        font-size: rem(14);
        color: white;
        width: rem(120);
        height: rem(40);
        background-color: #490000;
        text-align: center;
        line-height: rem(40);
        border-bottom-right-radius: rem(50);
        border-bottom-left-radius: rem(50);
        z-index: 9;
        cursor: pointer;
    }
    ul {
        height: rem(132);
        overflow: hidden;
        margin: 0 auto;
        max-width: rem(1002);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    li {
        width: rem(106);
        height: rem(34);
        background: url('../img/nav-bg.png')no-repeat center/100% 100%;
        text-align: center;
        line-height: rem(34);
        margin: rem(16);
        font-size: rem(18);
        color: #FFC948;
        cursor: pointer;
        &.cur {
            background-image: url('../img/nav-cur.png');
        }
    }
}

.discard{
    // position: absolute !important;
    // left: 9000px !important;
    // top: 0 !important;
    display: none !important;
}

.wrap {
    margin: 0 auto;
    padding-top: rem(30);
    width: rem(1020);

    &-title,&-title2 {
        position: relative;
        height: rem(58);
        background: url('../img/title-bg.png')center/rem(15) 100%;
        width: auto;
        margin: rem(20) auto;
        display: flex;
        justify-content: center;
        max-width: rem(500);
        &::before {
            content: '';
            position: absolute;
            left: rem(-28);
            top: 0;
            height: rem(58);
            width: rem(31);
            background: url('../img/title-l.png')no-repeat center/100% 100%;
        }
        &::after {
            content: '';
            position: absolute;
            right: rem(-28);
            top: 0;
            height: rem(58);
            width: rem(28);
            background: url('../img/title-r.png')no-repeat center/100% 100%;
        }
        li {
            height: 100%;
            width: rem(130);
            font-size: rem(28);
            text-align: center;
            line-height: rem(58);
            color: #FFECC3;
            cursor: pointer;
        }
    }
    &-info{
        width: 99%;
        box-sizing: border-box;
        padding: 0 rem(10);
        line-height: rem(30);
        background-color: #490000;
        font-size: rem(18);
        color: #FFC948;
        text-align: center;
        margin-left: rem(10);
    }
    .container {
        width: 100%;
        // display: flex;
        // flex-wrap: wrap;
        // justify-content: space-between;
        .card {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 32.3%;
            height: rem(429);
            background: url('../img/card-bg.png')no-repeat center/100% 100%;
            box-sizing: border-box;
            padding: rem(14);
            margin-top: rem(10);
            margin-left: rem(10);
            cursor: pointer;
            img {
                width: 100%;
                height: 76%;
            }
            &-foot {
                width: 100%;
                height: 21%;
                font-size: rem(18);
                color: white;
                &-title {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                &-old{
                    color: #DAB9B9;
                    font-size: rem(16);
                    line-height: rem(30);
                    padding-top: rem(10);

                }
                &-new{
                    color: #FFEA02;
                    font-size: rem(16);
                    i{
                        font-style: normal;
                        font-size: rem(20);
                        font-weight: bold;
                    }
                }

            }
        }
    }
    &-backtop{
        margin: 0 auto;
        margin-top: rem(50);
        width: rem(535);
        height: rem(83);
        background: url('../img/back-top.png')no-repeat center/100% 100%;

    }
}
footer{
    width: rem(1080);
    height: rem(239);
    background: url('../img/bottom-bg.png')no-repeat center/100% 100%;

    .kefu{
        position: fixed;
        top: 20%;
        right: 0;
        width: rem(109);
        height: rem(259);
        z-index: 10;
        background: url('../img/kf.png')no-repeat center/100% 100%;
    }
}

// 媒体查询

@media screen and (max-width: 810px) {
    .wrap .container .card{
        width: 49%;
        height: rem(650);
        font-size: rem(30);
    }
    nav .nav-more{
        font-size: rem(28)
    }
    nav ul{
       height: rem(204); 
    }
    nav li{
        width: rem(160);
        height: rem(70);
        line-height: rem(70);
        font-size: rem(30);        
    }
    .wrap .container .card-foot{
        font-size: rem(30)
    }
    .kefu{
        display: none;
    }
    .wrap .container .card-foot-old{
        line-height: rem(50);
    }
}
@media screen and (min-width:960px){
    header{
        width: 100%;
        height: 559px;
        background: url('../img/gd-banner-pc.jpg')no-repeat center/cover;
    }
    footer{
        width: 100%;
        height: 312px;
        background: url('../img/bottom-bg-pc.png')no-repeat center/cover;
    }
}